<!--
 * @FileDescription 故障修复
 * @Author lz
 * @Date 20230612 15:20:39
 * @LastEditors lz
 * @LastEditTime 20230612 15:20:39
-->
<template>
  <div class="TrouBox">
    <div class="Popup">
      <div class="titBox">
        故障修复
        <close-outlined class="cancel" @click="cancel" />
      </div>
      <a-button type="primary" class="ResetButton" @click="Reset">重置</a-button>
      <div class="actionBar">
        <a-input-search
          v-model:value="inp_value"
          placeholder="搜索"
          @search="onSearch"
          class="inp_box"
        />
        <img src="/images/checkboxSucc.png" class="checkBox" />
        <span class="txt"
          >已修复{{ HomeContent.Default.TrobiesList.value.RepairCount }}个故障点</span
        >
      </div>
      <div
        class="popup_cont"
        v-if="
          HomeContent.Default.ModeType.value == 1 ||
          HomeContent.Default.ModeType.value == 2
        "
      >
        <div
          v-for="(i, index) in HomeContent.Default.TrobiesList.value.faultRepairModels"
          :key="index"
          class="checkListBox"
          :class="
            i.State == true && i.Result == true
              ? 'success_b'
              : i.State == true && i.Result == false
              ? 'error_b'
              : ''
          "
        >
          <a-checkbox
            v-model:checked="i.types"
            @change="changeCheck"
            :disabled="i.State"
            >{{ i.Name }}</a-checkbox
          >
          <img
            src="/images/checkboxSucc.png"
            class="success_ico"
            v-if="i.State == true && i.Result == true"
          />
          <span class="SuccTxt" v-if="i.State == true && i.Result == true">修复正确</span>
          <img
            src="/images/checkboxErr.png"
            class="success_ico"
            v-if="i.State == true && i.Result == false"
          />
          <span class="ErrTxt" v-if="i.State == true && i.Result == false">修复错误</span>
        </div>
      </div>
      <!-- =============================================================================================== -->
      <div class="popup_cont" v-else>
        <div
          v-for="(i, index) in HomeContent.Default.TrobiesList.value.faultRepairModels"
          :key="index"
          class="checkListBox"
          :class="i.State == true ? 'success_b' : ''"
        >
          <a-checkbox
            v-model:checked="i.types"
            @change="changeCheck"
            :disabled="i.State"
            >{{ i.Name }}</a-checkbox
          >
          <img
            src="/images/checkboxSucc.png"
            class="success_ico"
            v-if="i.State == true"
          />
          <span class="SuccTxt" v-if="i.State == true">已修复</span>
        </div>
      </div>
      <!-- =============================================================================================== -->
      <div class="footer">
        <div class="read" @click="confirm">确认修复</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CloseOutlined } from "@ant-design/icons-vue";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import { reactive, ref } from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
const state = reactive({
  tabList: <any>[],
});
const inp_value = ref<string>("");
function cancel() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_REPAIR_CLOSE
    )
  );
  HomeContent.Default.TrobiesShow.value = false;
}
//模糊搜索
async function onSearch() {
  console.log(inp_value.value);

  if (inp_value.value == "") {
    let newList: any = await WebSocketComponent.Default.PostMessageAsync(
      new ClientMessage.DiagnosisAdapterRequest(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_GET_REPAIR
      )
    );
    HomeContent.Default.TrobiesList.value = JSON.parse(newList.Content).Result;
  } else {
    let data = [];
    let newList: any = await WebSocketComponent.Default.PostMessageAsync(
      new ClientMessage.DiagnosisAdapterRequest(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_GET_REPAIR
      )
    );
    HomeContent.Default.TrobiesList.value = JSON.parse(newList.Content).Result;
    for (
      let i = 0;
      i < HomeContent.Default.TrobiesList.value.faultRepairModels.length;
      i++
    ) {
      if (
        HomeContent.Default.TrobiesList.value.faultRepairModels[i].Name.indexOf(
          inp_value.value
        ) != -1
      ) {
        data.push(HomeContent.Default.TrobiesList.value.faultRepairModels[i]);
      }
    }
    HomeContent.Default.TrobiesList.value.faultRepairModels = data;
  }
}
//确认修复
async function confirm() {
  let newArr: any[] = [];
  HomeContent.Default.TrobiesList.value.faultRepairModels.forEach((item: any) => {
    if (item.types) {
      newArr.push(item.Id);
    }
  });
  if (newArr.length == 0) {
    return;
  }
  let newList: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_REPAIR,
      newArr.toString()
    )
  );
  console.log(JSON.parse(newList.Content));
  JSON.parse(newList.Content).Result.faultRepairModels.forEach((item: any) => {
    item.types = false;
    if (item.State) {
      item.types = true;
    }
  });
  console.log(JSON.parse(newList.Content).Result);
  HomeContent.Default.TrobiesList.value = JSON.parse(newList.Content).Result;
}
function changeCheck() {}
async function Reset() {
  inp_value.value = "";
  let newList: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_GET_REPAIR
    )
  );
  HomeContent.Default.TrobiesList.value = JSON.parse(newList.Content).Result;
}
</script>

<style scoped>
.TrouBox {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.3);
  position: relative;
}

.Popup {
  width: 1440px;
  height: 940px;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.titBox {
  height: 54px;
  font-size: 36px;
  font-weight: 600;
  color: #000000;
  line-height: 42px;
  margin-top: 30px;
  margin-left: 40px;
}

.cancel {
  font-size: 28px;
  font-weight: 600;
  float: right;
  margin-top: 4px;
  margin-right: 30px;
}

.inp_box {
  width: 500px;
  height: 50px;
  margin-left: 70px;
  margin-top: 24px;
}

.actionBar {
  width: 100%;
  height: 50px;
  position: relative;
}

.checkBox {
  width: 24px;
  position: absolute;
  top: 36px;
  right: 171px;
}

.txt {
  font-size: 16px;
  font-weight: 500;
  color: #202020;
  position: absolute;
  right: 36px;
  top: 34px;
}

.footer {
  height: 78px;
  width: 100%;
  border-top: 1px solid #ede8f4;
  position: absolute;
  bottom: 0;
}

.read {
  width: 156px;
  height: 48px;
  line-height: 46px;
  font-size: 16px;
  font-weight: 500;
  color: #202020;
  background: #9bfb4e;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  position: absolute;
  right: 24px;
  bottom: 14px;
  text-align: center;
}

.popup_cont {
  width: 1300px;
  height: 685px;
  margin: 0 auto;
  margin-top: 34px;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 12px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #f8f8f8;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #dfe1e8;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: #dfe1e8;
}

.checkListBox {
  width: 610px;
  height: 72px;
  float: left;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #f0f0f0;
  padding-left: 20px;
  margin-right: 30px;
  margin-bottom: 16px;
  position: relative;
  display: flex;
  align-items: center;
}

.ErrTxt {
  font-size: 16px;
  font-weight: 400;
  color: #fb4e4e;
  position: absolute;
  right: 10px;
}

.SuccTxt {
  font-size: 16px;
  font-weight: 400;
  color: #42cb6e;
  position: absolute;
  right: 10px;
}

.success_ico {
  width: 24px;
  position: absolute;
  right: 84px;
  top: 24px;
}

.l2 {
  margin-right: 0;
}

:deep().ant-checkbox-wrapper {
  width: 470px;
  font-size: 16px;
  font-weight: 400;
  align-items: center;
  color: #202020;
}

:deep().ant-checkbox {
  top: 0 !important;
}

.success_b {
  background: linear-gradient(
    90deg,
    rgba(155, 251, 78, 0.1) 0%,
    rgba(155, 251, 78, 0.07) 58%,
    rgba(155, 251, 78, 0) 100%
  );
  border: none;
}

.error_b {
  background: linear-gradient(
    90deg,
    rgba(251, 78, 78, 0.1) 0%,
    rgba(251, 78, 78, 0.07) 58%,
    rgba(251, 78, 78, 0) 100%
  );
  border: none;
}

:deep().ant-checkbox-disabled + span {
  color: #202020;
}

:deep().ant-checkbox-disabled {
  display: none;
}

:deep().ant-btn {
  height: 46px;
  width: 46px;
}

:deep().ant-input {
  height: 46px;
}
.ResetButton {
  position: absolute;
  left: 600px;
  top: 111px;
  width: 80px;
  height: 40px;
  z-index: 999;
}
</style>
